<template>
    <div id='wrap'>
        <h1>语法糖支持ts写法</h1>
        <p>{{ userInfo.name }}</p>
        <p>{{ useeInfo1.name }}</p>
        <p>{{ num }}</p>
        <DeepDemo class="comson2000" />
    </div>
</template>
<script lang='ts'>
export default {
    name: 'studemo8',
}
</script>

<script lang='ts' setup>
import DeepDemo from './component/DeepDemo.vue'
import { ref, type Ref } from 'vue';
import { h } from 'vue';
//定义用户信息接口
interface IUser {
    name: string;
    age: number;
}
//响应式数据
const userInfo = ref<IUser>({
    name: '张三',
    age: 20,
})
const useeInfo1 = ref<IUser>({
    name: '王小明',
    age: 20
})

let num: Ref<number>
num = ref(10)
</script>

<style lang='scss'>
@use '@/assets/common.scss';

#wrap {
    width: 100%;
    height: 100%;
    text-align: center;

    h1 {
        color: white;
    }
}
</style>